<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@taglib prefix="" uri="" %>--%>
<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    // var pageNo1=1;
    var  DataBaseRoleName="";
    var pageNo=1;
    var pageSize=2;
    var pages=0;

    $(function () {
        pageList(pageNo, pageSize);
        // 查询还未出租的房子
        // $("#addemps").click(function () {
        //     $.ajax({
        //         url: "/myweb/rent/getHouse",
        //         type: "get",
        //         data: {},
        //         async: false,
        //         dataType: "json",
        //         success: function (data) {
        //
        //             var html = ""
        //             $.each(data, function (i, n) {
        //                 html += '<option value="' + n.hId + '">' + n.hAddress + '</option>'
        //             })
        //             $("#hAddress").html(html)
        //         }
        //     })
        // })
        //查找所以角色
        // $("#addemps").click(function () {
        //     $.ajax({
        //         url: "/myweb/role/getLessee",
        //         type: "get",
        //         data: {},
        //         async: false,
        //         dataType: "json",
        //         success: function (data) {
        //
        //             var html = ""
        //             $.each(data, function (i, n) {
        //                 html += '<option value="' + n.lId + '">' + n.lName + '</option>'
        //             })
        //             $("#lName").html(html)
        //         }
        //     })
        //
        // })

        //添加角色信息
        $("#addEmp").click(function () {
            // if (!validate_add_form()){
            //     return false;
            // }
            if ($("#addEmp").attr("ajax-va")=="error"){
                $("#empAddModal").modal('hide')
                alert("添加失败 用户名非法");
                return false;
            }

            $.ajax({
                url: "/myweb/role/insert",
                type: "get",
                data: {
                    "rName": $("#role_add_input").val(),
                    "rDesc": $("#beizu_add_input").val(),
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data != 0) {
                        //关闭模态窗口
                        $("#empAddModal").modal('hide')
                        //重写分页查询
                        pageList(1, pageSize)
                        //清空模态窗口
                        $("#deptList").val("")
                        $("#empName_add_input").val("")
                        $("#email_add_input").val("")
                        $(".gender").val("")
                        alert("添加成功");
                    }

                }
            })

        })

        //更新角色信息
        $("#updateEmp").click(function () {
            //判断当前角色是否被修改,如果没有没有修改则此用户明合法
               if (DataBaseRoleName==$("#role_update_input").val()){
                   $.ajax({
                       url: "/myweb/role/update",
                       type: "get",
                       data: {
                           "rId":$("#empId").val(),
                           "rName":$("#role_update_input").val(),
                           "rDesc":$("#beizu_update_input").val(),
                           "rCreatTime":$("#time_update_input").val()
                       },
                       async: false,
                       dataType: "json",
                       success: function (data) {
                           if (data == 1) {
                               //关闭模态窗口
                               $("#empUpdateModal").modal('hide')
                               //清空表格信息
                               // $("#empUpdateModal")
                               //重写查询
                               pageList(pageNo, pageSize)
                               alert("修改成功");
                           }
                       }
                   })
               }
               else {
                   //如果修改了当前用户角色
                   //    校验角色的合法性
                   // $("#role_add_input").change(function () {
                       var rName = $("#role_update_input").val();
                       $.ajax({
                           url: "/myweb/role/checkRName",
                           type: "get",
                           data: {
                               "rName": rName
                           },
                           async: false,
                           dataType: "json",
                           success: function (data) {
                               if (!data.success) {
                                   $("#role_update_input").next("span").text("用户名可用")
                                   $("#updateEmp").attr("ajax-va", "success")
                               } else {
                                   $("#role_update_input").next("span").text("用户名不可用")
                                   $("#updateEmp").attr("ajax-va", "error")
                               }
                           }
                       })
                   //
                   if ($("#updateEmp").attr("ajax-va")=="error"){
                       // 修改失败不关闭模态窗口,会在角色小面提醒用户角色合法
                       // $("#empUpdateModal").modal('hide')
                       alert("添加失败 用户名非法");

                       return false;
                   }else {
                       alert(123)
                       $.ajax({
                           url: "/myweb/role/update",
                           type: "get",
                           data: {
                               "rId":$("#empId").val(),
                               "rName":$("#role_update_input").val(),
                               "rDesc":$("#beizu_update_input").val(),
                               "rCreatTime":$("#time_update_input").val()
                           },
                           async: false,
                           dataType: "json",
                           success: function (data) {
                               if (data == 1) {
                                   //关闭模态窗口
                                   $("#empUpdateModal").modal('hide')
                                   //清空表格信息
                                   // $("#empUpdateModal form").reset();
                                   //重写查询
                                   pageList(pageNo, pageSize)
                                   alert("修改成功");
                               }
                           }
                       })
                   }

               }

        })


        //    校验添加角色的合法性
        $("#role_add_input").change(function () {
            var rName = this.value;
            $.ajax({
                url: "/myweb/role/checkRName",
                type: "get",
                data: {
                    "rName": rName
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (!data.success) {
                        $("#role_add_input").next("span").text("用户名可用")
                        $("#addEmp").attr("ajax-va", "success")
                    } else {
                        $("#role_add_input").next("span").text("用户名不可用")
                        $("#addEmp").attr("ajax-va", "error")
                    }
                }
            })


        })


        $("#gjz").keydown(function (event) {
            if(event.keyCode==13){
                pageList(1,pageSize);

            }})



    })

    //分页查询
    function pageList(pageNo,pageSize) {
        $.ajax({
            url: "/myweb/role/getAll",
            type: "get",
            data: {
                "like":$("#gjz").val(),
                "pageNo":pageNo,
                "pageSize":pageSize
            },
            async:false,
            dataType: "json",
            success: function (data) {
                var html="";
                $.each(data.list,function (i,n) {
                    html+='<tr>';
                    html+='<td>'+n.rid+'</td>';
                    html+='<td>'+n.rname+'</td>';
                    html+='<td>'+n.rcreatTime+'</td>';
                    html+='<td>'+n.rdesc+'</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success" onclick="delete1('+n.rid+')" >删除</button>';
                    html+='</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success"  onclick="update('+n.rid+')" >修改</button>';
                    html+='</td>';
                    html+='</tr>';
                })

                $("#tbody").html(html);

                var navpages=data.navigatepageNums;
                $("#first").html('<a onclick="pointPage('+navpages[0]+')">'+navpages[0]+'</a>')
                $("#second").html('<a onclick="pointPage('+navpages[1]+')">'+navpages[1]+'</a>')
                // 总页数
                $("#pages").html('<a href="#">总页数:'+data.pages+'</a>')
                //总页数
                pages=data.pages
                //    当前显示信息的页数
                pageNum = data.pageNum;
            }

        });
    }
    //显示点击的那一页数据
    function pointPage(pageNo){
        alert(pageNo)
        if($("#gjz").val()!=null){
            mohu(pageNo,pageSize);
        }else
        {pageList(pageNo,pageSize);}
    }
    //删除操作
    function delete1(rId){
        $.ajax({
            url: "/myweb/role/delete",
            type: "get",
            data: {
                "rId":rId
            },
            async:false,
            dataType: "json",
            success: function (data) {
                if (data){
                    alert("删除成功")
                    //   重写查询删除后的数据
                    pageList(pageNo,pageSize)
                }
            }
        })

    }
    //    下一页
    function nextPage() {

            pageNo = pageNum + 1
        if (pageNo >= pages) {
            pageNo = pages;
        }
        pageList(pageNo, pageSize)
    }
    //    上一页
    function prePage() {


        pageNo=pageNum-1
        if (pageNo<=1){
            pageNo=1;
        }
        pageList(pageNo,pageSize)
    }
    //    首页
    function firstPage() {

        pageList(1,pageSize)
    }
    //    末页
    function endPage() {

            pageList(pages,pageSize)
    }


    //    校验邮箱和用户名
    // function validate_add_form(){
    //     $("#empName_add_input").parent().removeClass("has-success has-error");
    //     $("#email_add_input").parent().removeClass("has-success has-error");
    //     //1.拿到要校验的数据
    //     var empName=$("#empName_add_input").val();
    //     var regName=/^[a-zA-Z0-9_-]{6,16}$/;
    //     if(!regName.test(empName)){
    //         //alert("用户名异常");
    //         $("#empName_add_input").parent().addClass("has-error");
    //         $("#empName_add_input").next("span").text("用户名需要是6-16位");
    //
    //         return false;
    //     }else{
    //         $("#empName_add_input").parent().addClass("has-success");
    //         $("#empName_add_input").next("span").text("");
    //     }
    //     //校验邮箱
    //     var email=$("#email_add_input").val();
    //     var regEmail=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    //     if(!regEmail.test(email)){
    //         // alert("邮箱格式异常");
    //         //清空之前的样式
    //         $("#email_add_input").parent().addClass("has-error");
    //         $("#email_add_input").next("span").text("邮箱格式不正确");
    //         return false;
    //     }else{
    //         $("#email_add_input").parent().addClass("has-success");
    //         $("#email_add_input").next("span").text("");
    //     }
    //     return true;
    // }


    //根据要修改的员工信息进行查询,显示在模态窗口中
    function update(rId) {
        $.ajax({
            url: "/myweb/role/selectOneByRId",
            type: "get",
            data: {
                "rId": rId
            },
            async: false,
            dataType: "json",
            success: function (data) {
                $("#empId").val(data.rid)
                $("#role_update_input").val(data.rname)
                $("#beizu_update_input").val(data.rdesc)
                $("#time_update_input").val(data.rcreatTime)
               // 清空span标签中的数据
                $("#role_update_input").next("span").text("")
               DataBaseRoleName=data.rname
                $("#empUpdateModal").modal('show')


            }
        })
    }

</script>
<head>
    <title>Title</title>
</head>
<body>

<%--模糊查询--%>

<div style="margin-left: 1150px">
        <div class="form-group">
            <input type="text" name="likes" id="gjz" class="form-control" placeholder="请输入关键字进行查询">
        </div>


</div>
<table class="table table-striped">

    <thead>
    <tr>
        <td>编号</td>
        <td>角色名称</td>
        <td>创建时间</td>
        <td>相关描述</td>
        <td>
            <button type="button" class="btn btn-success">操作</button>
        </td>
        <td>
            <button type="button" class="btn btn-success"  data-toggle="modal"  data-target="#empAddModal" id="addemps">添加</button>
        </td>
    </tr>
    </thead>

    <tbody id="tbody">

    </tbody>
</table>



<nav aria-label="Page navigation">
    <ul class="pagination" id="page_ul">
        <li id="firstPage" onclick="firstPage()">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">首页</span>
            </a>
        </li>
        <li id="prePage"><a  onclick="prePage()">上一页</a></li>
        <li id="first"><a href="#">1</a></li>
        <li id="second"><a href="#">2</a></li>
<%--        <li id="three"><a href="#">3</a></li>--%>
<%--        <li id="four"><a href="#">4</a></li>--%>

        <li id="nextPage" onclick="nextPage()"><a>下一页</a></li>
        <li id="endPage" onclick="endPage()">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">末页</span>
            </a>
        </li>
        <li id="pages"><a href="#">总页数:${pages}</a></li>
    </ul>
</nav>
<%--新增模态窗口--%>
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加角色</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">角色名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="role_add_input" placeholder="xxx">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" name="text" class="form-control" id="beizu_add_input" placeholder="xxxx">
                            <span class="help-block"></span>

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="addEmp" ajax-va="error">Save changes</button>
            </div>
        </div>
    </div>
</div>
<%--修改模态窗口--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改角色信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <input type="hidden" id="empId" >

                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">角色名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="role_update_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">

                        <label class="col-sm-2 control-label">创建时间</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="time_update_input" placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="beizu_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="updateEmp" ajax-va="error">Update</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
